<template>
    <div class="button-container">
        <button ref="priBtn" :style="{
            transform: `scale(${priBtnScale})`
            }">
            <slot></slot>
        </button>
        <img class="hint-left" :style="{
            animation: leftAnimation,
            visibility: leftVisible ? 'visible' : 'hidden'
        }" alt="hint-left" :src="isPrimary ? primaryPic : subPic"/>
        <img class="hint-right"
             :style="{
            animation: rightAnimation,
            visibility: rightVisible ? 'visible' : 'hidden'
        }" alt="hint-right" :src="isPrimary ? primaryPic : subPic"/>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';
    @Component
    export default class Template extends Vue {

        @Prop({type: Boolean, default: false})
        isPrimary?: boolean;

        priBtnDown = false;
        priBtnDownTime = 0;
        priBtnAnime: {
            startAnime: number;
            startAnimeFrame: number;
            startAnimeMax: number;
            startAnimeCallback: ((arg: number) => void) | null;
            endAnime: number;
            endAnimeFrame: number;
            endAnimeMax: number;
            endAnimeCallback: ((arg: number) => void) | null;
            minScale: number;
        } = {
            startAnime: 0,
            startAnimeFrame: 0,
            startAnimeMax: 8,
            startAnimeCallback: null,
            endAnime: 0,
            endAnimeFrame: 0,
            endAnimeMax: 8,
            endAnimeCallback: null,
            minScale: 0.97
        }
        priBtnScale = 1;
        leftAnimation = '';
        rightAnimation = '';
        leftVisible = false;
        rightVisible = false;
        primaryPic = require( '../../assets/images/button-hint.png');
        subPic = require( '../../assets/images/button-hint-sub.png');
        mounted () {
            this.initButtons();
        }
        leftAnime () {
            this.leftVisible = true;
            this.leftAnimation = 'hint-left-frames 166ms ease 0s 1 running';
            setTimeout(() => {
                this.leftAnimation = '';
                this.leftVisible = false;
            }, 166);
        }
        rightAnime () {
            this.rightVisible = true;
            this.rightAnimation = 'hint-right-frames 166ms ease 0s 1 running';
            setTimeout(() => {
                this.rightAnimation = '';
                this.rightVisible = false;
            }, 166);
        }
        initButtons () {
            (this.$refs.priBtn as HTMLElement).addEventListener('pointerdown', this.handlePriBtnPointerDown);
            (this.$refs.priBtn as HTMLElement).addEventListener('pointermove', this.handlePriBtnPointerMove);
            (this.$refs.priBtn as HTMLElement).addEventListener('pointerup', this.handlePriBtnPointerUp);
            (this.$refs.priBtn as HTMLElement).addEventListener('pointercancel', this.handlePriBtnPointerUp);
            this.priBtnAnime.startAnimeCallback = () => {
                this.priBtnScale = this.priBtnScale - (this.priBtnScale - this.priBtnAnime.minScale) * (this.priBtnAnime.startAnimeFrame) / this.priBtnAnime.startAnimeMax;
                this.priBtnAnime.startAnimeFrame ++;
                if(this.priBtnAnime.startAnimeFrame > this.priBtnAnime.startAnimeMax) {
                    this.priBtnAnime.startAnimeFrame = 0;
                } else {
                    window.requestAnimationFrame(this.priBtnAnime.startAnimeCallback!)
                }
            }
            this.priBtnAnime.endAnimeCallback = () => {
                this.priBtnScale = this.priBtnScale + (1 - this.priBtnScale) * (this.priBtnAnime.endAnimeFrame) / this.priBtnAnime.endAnimeMax;
                this.priBtnAnime.endAnimeFrame ++;
                if(this.priBtnAnime.endAnimeFrame > this.priBtnAnime.endAnimeMax) {
                    this.priBtnAnime.endAnimeFrame = 0;
                } else {
                    window.requestAnimationFrame(this.priBtnAnime.endAnimeCallback!)
                }
            }
        }
        releaseButtons() {
            (this.$refs.priBtn as HTMLElement).removeEventListener('pointerdown', this.handlePriBtnPointerDown);
            (this.$refs.priBtn as HTMLElement).removeEventListener('pointermove', this.handlePriBtnPointerMove);
            (this.$refs.priBtn as HTMLElement).removeEventListener('pointerup', this.handlePriBtnPointerUp);
            (this.$refs.priBtn as HTMLElement).removeEventListener('pointercancel', this.handlePriBtnPointerUp);
        }
        handlePriBtnPointerDown (e: PointerEvent)  {
            this.priBtnDown = true;
            this.priBtnDownTime = Date.now();
            this.priBtnAnime.startAnime = window.requestAnimationFrame(this.priBtnAnime.startAnimeCallback!);
            (e.target as HTMLElement).setPointerCapture(e.pointerId);
        }
        handlePriBtnPointerMove (e: PointerEvent)  {
            if (this.priBtnDown) {
            }
        }
        handlePriBtnPointerUp (e: PointerEvent)  {
            this.priBtnDown = false;
            const time = Date.now();
            if(time - this.priBtnDownTime < 166) {
                this.leftAnime();
                this.rightAnime();
                setTimeout(() => {
                    this.$emit('click');
                }, 166);
            }
            (e.target as HTMLElement).releasePointerCapture(e.pointerId);
            this.priBtnAnime.endAnime = window.requestAnimationFrame(this.priBtnAnime.endAnimeCallback!);
        }
        beforeDestroy () {
            this.releaseButtons();
        }
    }
</script>

<style lang="scss">
    @keyframes hint-left-frames {
        0% {
            left: -1.7vw;
            top: -2.2vw;
        }
        50% {
            left: -2.2vw;
            top: -2.7vw
        }
        100% {
            left: -1.7vw;
            top: -2.2vw;
        }
    }
    @keyframes hint-right-frames {
        0% {
            right: -1.7vw;
            top: -2.2vw;
        }
        50% {
            right: -2.2vw;
            top: -2.7vw
        }
        100% {
            right: -1.7vw;
            top: -2.2vw;
        }
    }
    .button-container {
        position: relative;
        img {
            position: absolute;
            &.hint-left {
                left: -1.7vw;
                top: -2.2vw;
                width: 4vw;
            }
            &.hint-right {
                right: -1.7vw;
                top: -2.2vw;
                width: 4vw;
                transform: rotateY(180deg);
            }
        }
    }

</style>